var mySwiper = new Swiper('#swiper-1', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    grabCursor : true,
    autoplay: {
        delay: 2000,
        stopOnLastSlide: true,
        disableOnInteraction: true,
    },


})

$('.searchInput').on('input',function(){
    const text =this.value.trim()
    let script =document.createElement('script')
    script.src=`https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36309,36367,34813,35909,36167,34584,35979,36075,36281,35863,26350,36316,36061&wd=${text}&req=2&bs=${text}&pbs=${text}&csor=5&pwd=aiqiyi&cb=fn&_=1651758256537`
    document.body.appendChild(script)
})

ul =document.querySelector('.displa')
    function fn(res) {
            console.log(res);
            // 根据拿到的结果我们要渲染页面
            // 但是这个时候我们要自己去实验，因为我们没有接口文档，只能自己去尝试
            // 我们发现我们的模糊搜索返回的是一个对象，里面有一个成员g这个里面就是我们搜索的内容
            // 但是有没有没有 g 的时候呢？
            // 我们发现是有没有 g 的时候的
            // 如何判断有没有 g ？
            //  => 因为我们发现如果有 g ，g是一个数组  是true
            //  => 如果没有 g 返回的是一个undefined   是undefined

            // 判断有没有 g 如果没有让ul隐藏
            if (!res.g) return ul.style.display = 'none'

            // 代码能执行到这里说明 g 是存在的  根据内容渲染页面 
            // 同时让ul显示
            let str = ''
            // 遍历循环数组
            res.g.forEach(item => {
                // 拼接字符串                   
                str += `<li>${ item.q }</li>`
                // 渲染到页面上
                ul.innerHTML = str
                // 让ul显示
                ul.style.display = 'block'
            })
        }
